<template>
	<view class="container">
		<view class="form-item">
			<text class="label">付款方式</text>
			<picker @change="bindFukuanChange" :value="fukuanCheck" :range="jiaohuoData">
				<view class="picker">{{jiaohuoData[fukuanCheck] || '请选择付款方式'}}</view>
			</picker>
		</view>

		<view class="form-item">
			<text class="label">物流公司</text>
			<picker @change="bindWuliuChange" :value="wuliuIndex" :range="wuliuFrom" range-key="name">
				<view class="picker">{{wuliuFrom[wuliuIndex]?.name || '请选择物流公司'}}</view>
			</picker>
		</view>

		<view class="form-item">
			<text class="label">物流运费</text>
			<input class="input" type="number" v-model="jsonFrom.yunfei" placeholder="请输入物流运费" />
		</view>

		<view class="form-item">
			<text class="label">追踪参考</text>
			<input class="input" type="text" v-model="jsonFrom.zhuizong" placeholder="请输入追踪参考号" />
		</view>

		<button class="submit-btn" @click="_xiuGaiJiaoHuoDan">提交修改</button>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getWuliuId, xiugaiRuku } from '@/api/shouhuo.js'

	// 物流公司列表
	const wuliuFrom = ref([])
	const wuliuIndex = ref(-1)
	
	// 付款方式选项
	const fukuanCheck = ref(0)
	const jiaohuoData = ['寄付', '到付', '上门维修']

	// 表单数据
	const jsonFrom = reactive({
		recid: '',
		wuliu: '',      // 物流公司
		fukuan: '',     // 付款方式
		yunfei: '',     // 物流运费
		zhuizong: ''    // 追踪参考
	})

	// 付款方式选择
	const bindFukuanChange = (e) => {
		fukuanCheck.value = e.detail.value
		jsonFrom.fukuan = jiaohuoData[fukuanCheck.value]
	}

	// 物流公司选择
	const bindWuliuChange = (e) => {
		wuliuIndex.value = e.detail.value
		jsonFrom.wuliu = wuliuFrom.value[wuliuIndex.value]?.id || ''
	}

	// 修改交货单
	const _xiuGaiJiaoHuoDan = () => {
		if (!jsonFrom.wuliu) {
			uni.showToast({ title: '请选择物流公司', icon: 'none' })
			return
		}
		
		xiugaiRuku(jsonFrom).then((res) => {
			uni.showToast({ title: '修改成功' })
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}).catch(err => {
			uni.showToast({ title: '修改失败', icon: 'none' })
		})
	}

	// 获取物流公司列表
	const _getWuliuId = () => {
		getWuliuId().then((res) => {
			wuliuFrom.value = res.result || []
		})
	}

	onLoad((option) => {
		if (option?.id) {
			jsonFrom.recid = option.id
			_getWuliuId()
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		
		.label {
			width: 180rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		.picker {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			padding: 10rpx 0;
		}
		
		.input {
			flex: 1;
			font-size: 28rpx;
			height: 60rpx;
			padding: 0 10rpx;
		}
	}
	
	.submit-btn {
		margin-top: 60rpx;
		background-color: #007AFF;
		color: white;
		border-radius: 8rpx;
	}
</style>